<template>
    <view class="container">
      <!-- 今日推荐-轮播图 -->
      <u-swiper
        :list="list1"
        :indicator="true"
        indicatorMode = "dot"
        indicatorStyle = "right:20rpx;"
        height="150"
        imgMode="widthFix"
      ></u-swiper>
      <!-- 今日推荐-新上好课 mostnews-->
      <view class="course">
        <view class="big-title">新上好课</view>
        <view class="course-list">
          <view class="course-list-item" v-for="(item,index) in mostNewList" :key="item.id">
            <view class="course-pic">
              <image :src="item.courseCover" mode="aspectFill" class="img"></image>
            </view>
            <view class="course-main">
              <view class="title">{{item.courseName}}</view>
              <view class="info" v-if="item.bizCourseDetail">{{item.bizCourseDetail}}</view>
              <view class="other">
                <view class="box">
                  <view class="mem" v-if="item.isMember">会员专享</view>
                  <view class="price">{{item.salePrice==0?'免费课程':'￥'+item.salePrice}}</view>
                </view>
                <view class="learn">{{item.clicks}}人学习</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 推荐好课：search -->
      <div class="recommend">
        <view class="big-title">推荐好课</view>
         <u-scroll-list :indicator="false" >
            <view v-for="(item, index) in recommendCourseList" :key="item.id" class="recommend-item">
              <view class="pic">
                <image :src="item.courseCover" class="img" mode="aspectFill"></image>
              </view>
              <view class="info">
                <view class="title">{{item.courseName}}</view>
                <view class="other">
                  <view class="member" v-if="item.isMember">会员专享</view>
                  <view class="price">
                    {{item.salePrice==0?'免费课程':'￥'+item.salePrice}}
                  </view>
                </view>
              </view>
            </view>
        </u-scroll-list>
      </div>
      <!-- 大家都在看：mostheat -->
      <view class="mostheat">
        <view class="big-title">大家都在看</view>
         <view class="mostheat-list">
            <view v-for="(item, index) in mostHeatCourseList" :key="item.id" class="mostheat-item">
              <view class="course-pic">
                <image :src="item.courseCover" mode="aspectFill" class="img"></image>
              </view>
              <view class="course-main">
                <view class="title">{{item.courseName}}</view>
                <view class="info" v-if="item.bizCourseDetail">{{item.bizCourseDetail}}</view>
                <view class="other">
                  <view class="box">
                    <view class="mem" v-if="item.isMember">会员专享</view>
                    <view class="price">{{item.salePrice==0?'免费课程':'￥'+item.salePrice}}</view>
                  </view>
                  <view class="learn">{{item.clicks}}人学习</view>
                </view>
              </view>
            </view>
        </view>
      </view>
      
    </view>
</template>

<script>
    import {getSliders} from '@/api/home.js'
    import {mostNew,recommendCourse} from '@/api/course.js'
    export default {
      options: { styleIsolation: 'shared' },
      props:{
        mostHeatCourseList:{
          type: Array,
          default:()=>{
            return []
          }
        },
        options:{
          type: Object,
          default:()=>{
            return {}
          }
        }
      },
      data() {
          return {
              list1: [],
              mostNewList:[],
              recommendCourseList: []
          }
      },
        mounted() {
          this.getBanner()
          this.getMostNews()
          this.getRecommendCourse()
      },
      methods:{
        // 获取轮播图
        async getBanner() {
          const {data} = await getSliders()
          // 对拿到的数据重新整合处理
          const newData = data.list.map(item => item.imageUrl)
          this.list1 = newData
        },
        // 获取首页新上好课
        async getMostNews() {
          const {data} = await mostNew({
            pageNum:1,
            pageSize:3
          })
          // 对拿到的数据重新整合处理
          this.mostNewList = data.pageInfo.list
        },
        // 获取首页推荐好课
        async getRecommendCourse() {
          const {data} = await recommendCourse({
            pageNum:1,
            pageSize:6
          })
          this.recommendCourseList = data.pageInfo.list
        },
        
      }
    }
</script>

<style lang="scss">
  .u-swiper {
    margin: 20rpx 0;
  }
  .container::v-deep .u-swiper-indicator__wrapper__dot {
    width: 12rpx;
    margin-right: 10rpx;
    margin-left: 0;
  }
  .container::v-deep .u-swiper-indicator__wrapper__dot--active {
     width: 12rpx;
  }
  .course {
    .big-title {
      font-size: 36rpx;
      font-weight: bold;
      line-height: 42rpx;
    }
    .course-list {
      margin-top: 10rpx;
      .course-list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 1px solid #ccc;
        .course-pic {
          width: 300rpx;
          height: 300rpx;
          background: #ccc;
          border-radius: 10rpx;
          .img {
            width: 100%;
            height: 100%;
          }
        }
        .course-main {
          flex: 1;
          font-size: 28rpx;
          line-height: 40rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 15rpx;
          .title {
            
            font-size: 28rpx;
            line-height: 40rpx;
            color: #333;
          }
          .info {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
  .container::v-deep .u-scroll-list__scroll-view__content {
      width: 840rpx;
      height: 620rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }
  .recommend {
    margin-top: 10rpx;
    .big-title {
      font-size: 36rpx;
      font-weight: bold;
      line-height: 42rpx;
    }

    .recommend-item {
          width: 264rpx;
          height: 286rpx;
          background: #fff;
          overflow: hidden;
          border: 1px solid rgba(27,39,94,.1);
          opacity: 1;
          border-radius: 10rpx;
          display: flex;
          flex-direction: column;
          background-color: #fff;
          position: relative;
          .pic {
            width: 100%;
            height: 130rpx;
            .img {
              width: 100%;
              height: 100%;
            }
          }
          .info {
            padding: 10rpx;
            margin-top: 8rpx;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            .title {
              font-size: 28rpx;
              font-weight: bold;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-box-orient: vertical;
              line-height: 34rpx;
              min-height: 68rpx;
            }
              
            .other {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .member {
                background-color: pink;
                color: #fff;
                padding: 8rpx 15rpx;
                border-radius: 36rpx 0 36rpx 0;
                font-size: 24rpx;
              }
                
              .price {
                font-size: 24rpx;
              }
            }
          }
    }
  }
  .mostheat {
    .big-title {
      font-size: 36rpx;
      font-weight: bold;
      line-height: 42rpx;
    }
    .mostheat-list {
      margin-top: 10rpx;
      .mostheat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 1px solid #ccc;
        .course-pic {
          width: 300rpx;
          height: 300rpx;
          background: #ccc;
          border-radius: 10rpx;
          .img {
            width: 100%;
            height: 100%;
          }
        }
        .course-main {
          flex: 1;
          font-size: 28rpx;
          line-height: 40rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 15rpx;
          .title {
            
            font-size: 28rpx;
            line-height: 40rpx;
            color: #333;
          }
          .info {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
  
</style>
